<template>
  <div class="table-container">
    <el-table :data="tableDataShow" style="width: 100%">
      <el-table-column
        v-for="item in table"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
      >
      </el-table-column>

      <slot></slot>

      <el-table-column label="操作">
        <!-- 操作列结构由外界传入，但是我数据要给出去，作用域插槽 -->
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >&nbsp;
          <!-- 删除的确认框 -->
          <el-popconfirm
            @confirm="handleDelete(scope.$index, scope.row)"
            title="确定删除吗？"
          >
            <el-button size="mini" type="danger" slot="reference"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      background
      hide-on-single-page
      :page-size="pageSize"
      :total="tableDataAll.length"
      :current-page.sync="currentPage"
    >
    </el-pagination>
    <!-- 编辑窗口 -->
    <!-- TODO，里面的form不会被销毁，导致我会传参但是不会走beforeMounted，然后就会展示之前的数据 -->
    <el-dialog title="编辑" :visible.sync="dialogVisible" width="40%">
      <!-- 放编辑时候的那个对话框 是一个表格 具有默认数据 -->
      <common-form :formTemplate="formTemplate" :form="formData">
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
        </el-form-item>
      </common-form>
    </el-dialog>
  </div>
</template>

<script>
import pubsub from "pubsub-js";
import CommonForm from "./CommonForm";
import { deleteTeacher, alterTeacher } from "@/services/admin/teacher";
import { deleteStudent, alterStudent } from "@/services/admin/student";

export default {
  props: ["tableData", "table", "formTemplate", "cp", "setTableData"],
  components: { CommonForm },
  data() {
    return {
      dialogVisible: false,
      currentPage: 1,
      pageSize: 8,
      keyword: "",
      tableDataAll: [],
      formData: {},
    };
  },
  methods: {
    handleEdit(index, row) {
      // console.log(index, row);
      this.formData = row;
      this.dialogVisible = true;
    },
    handleDelete(index, row) {
      // console.log(index, row);
      console.log("触发删除");
      const { cp } = this;
      // TODO:发送网络请求进行删除
      if (cp === "teacher") {
        const { teacher_id } = row;
        deleteTeacher(teacher_id).then((res) => {
          this.$codeJudge(res.data.code);
          // 刷新数据：
          if (res.data.code == 200) {
            // setTableData(res.data.data);
          }
        });
      } else if (cp === "student") {
        const { student_id } = row;
        deleteStudent(student_id).then((res) => {
          this.$codeJudge(res.data.code);
          if (res.data.code == 200) {
            // setTableData(res.data.data);
          }
        });
      }
      // TODO:重新请求或者本地执行一次逻辑
      //
    },
    // 编辑窗口确定的回调
    submitForm() {
      //
      const { cp } = this;
      console.log(cp);
      if (cp === "teacher") {
        alterTeacher(this.formData).then((res) => {
          this.$codeJudge(res.data.code, "修改成功", "修改失败");
          this.dialogVisible = false;
        });
      } else if (cp === "student") {
        alterStudent(this.formData).then((res) => {
          this.$codeJudge(res.data.code, "修改成功", "修改失败");
          this.dialogVisible = false;
        });
      }
    },
  },
  computed: {
    tableDataShow() {
      const start_index = (this.currentPage - 1) * this.pageSize;
      const end_index = this.currentPage * this.pageSize;
      if (this.keyword.length !== 0) {
        // 返回的依然是
        this.tableDataAll = this.tableData.filter((e) =>
          e.name.includes(this.keyword)
        );
      } else {
        this.tableDataAll = this.tableData;
      }
      return this.tableDataAll.slice(start_index, end_index);
    },
  },
  mounted() {
    this.pubId = pubsub.subscribe("keyword", (_, kw) => {
      this.keyword = kw;
    });
    this.tableDataAll = this.tableData;
  },
  beforeDestroy() {
    pubsub.unsubscribe(this.pubId);
  },
};
</script>